<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.fuzzySearchField" style="width: 200px;" placeholder="模糊搜索" class="filter-item"/>
      <el-input v-model="listQuery.name" style="width: 200px" placeholder="请输入名称进行搜索" class="filter-item"/>
      <el-input v-model="listQuery.remark" style="width: 200px" placeholder="请输入备注进行搜索" class="filter-item"/>
      <el-button v-permission="['admin','editor']" v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="pageList"
      :default-sort="sortColumn"
      element-loading-text="Loading"
      border
      stripe
      fit
      @sort-change="sort"
    >
      <el-table-column sortable="custom" align="center" label="名称" prop="name"/>
      <el-table-column align="center" label="备注" prop="remark"/>
      <el-table-column label="创建时间" align="center" prop="insert_tms" sortable/>
      <el-table-column label="最后更新时间" align="center" prop="update_tms" sortable/>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-show="total>0" :current-page="page" :page-sizes="[10,20,30,50]" :page-size="listQuery.page_size" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/role'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      list: [],
      sourceList: [],
      sortColumn: { prop: 'update_tms', order: 'descending' },
      listLoading: true,
      page: 1,
      listQuery: {
        page_size: 10,
        fuzzySearchField: null,
        name: null,
        remark: null
      },
      total: 0,
      downloadLoading: false
    }
  },
  computed: {
    pageList() {
      var temp = this.list
      return temp.sort((x, y) => {
        var prop = this.sortColumn.prop
        var order = this.sortColumn.order
        if (prop && x[prop].toLowerCase() < y[prop].toLowerCase()) {
          return order === 'ascending' ? -1 : 1
        }
        if (prop && x[prop].toLowerCase() > y[prop].toLowerCase()) {
          return order === 'ascending' ? 1 : -1
        }
        return 0
      })
        .slice((this.page - 1) * this.listQuery.page_size, this.page * this.listQuery.page_size)
    }
  },
  watch: {
    listQuery: {
      handler: function(val, oldval) {
        this.search()
      },
      deep: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.sourceList = response.data.list
        this.search()
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    search() {
      // 初始化数据
      this.list = this.sourceList
      // 模糊搜索
      if (this.listQuery.fuzzySearchField) {
        this.list = this.list.filter(x => {
          return x.name.indexOf(this.listQuery.fuzzySearchField) > -1 || x.remark.indexOf(this.listQuery.fuzzySearchField) > -1
        })
      }
      // 字段精确搜索
      if (this.listQuery.name) {
        this.list = this.list.filter(x => {
          return x.name.indexOf(this.listQuery.name) > -1
        })
      }
      if (this.listQuery.remark) {
        this.list = this.list.filter(x => {
          return x.remark.indexOf(this.listQuery.remark) > -1
        })
      }

      this.page = 1
      this.total = this.list.length
    },
    // 排序
    sort(column) {
      this.sortColumn = column
      this.search()
    },
    // 换页
    handleSizeChange(val) {
      this.listQuery.page_size = val
    },
    // 修改每页page_size
    handleCurrentChange(val) {
      this.page = val
    },
    // 导出为excel
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['名称', '备注', '创建时间', '最后更新时间']
        const filterVal = ['name', 'remark', 'insert_tms', 'update_tms']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '导出测试-' + new Date()
        })
        this.downloadLoading = false
      }).catch((e) => {
        this.downloadLoading = false
        console.log(e)
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'insert_tms' || j === 'update_tms') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

